<template>
	<view class="index">
		<view class="navbar">
			<view class="status_bar"></view>
			<view class="navbarH acea-row row-center">
				<!-- <view style="width: 130rpx;height: 40rpx;"></view> -->
				<view class="title">信息页</view>
				<!-- <view class="acea-row row-middle" @click.stop="scanCode">
					<view class="subtitle">扫码上报</view>
					<view class="iconfont icon-saoma"></view>
				</view> -->
			</view>
		</view>
		<view class="">
			<view class="status_bar"></view>
			<view style="height: 100rpx;"></view>
		</view>
		
		<view class="main">
			<view class="acea-row row-between-wrapper timers">
				<view class="color666 fs-26">{{ info.time }}</view>
				<view class="acea-row row-middle" @click.stop="scanCode">
					<view class="subtitle">扫码上报</view>
					<view class="iconfont icon-saoma"></view>
				</view>
				<!-- <view class="acea-row row-middle" @click.stop="urlClick(`/pages/dispatch/index`)">
					<image class="index01" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/index01.png" mode="aspectFit"></image>
				</view> -->
			</view>
			
			<view class="list mt30">
				<view class="item mb30" v-for="(item,index) in list" :key="index" @click.stop="getdetails(item.id)">
					<view class="p30 bor-bot acea-row">
						<view class="pictrue">
							<image class="imgwh" :src="item.image" mode=""></image>
						</view>
						<view class="ml20 acea-row row-column row-around" style="width: 480rpx;">
							<view class="acea-row row-between">
								<view class="fs-30 bold color444">{{ item.name }}</view>
								<view class="color666 fs-26">阈值：{{ item.capacity_max || 0 }}m³</view>
							</view>
							<view class="mt10 color999 fs-26">{{ item.address }}</view>
						</view>
					</view>
					<view class="acea-row row-between p30">
						<view class="fs-26 color999">
							<view>回收箱大约已使用： <text class="bold color333">{{ item.capacity || 0 }}m³</text> </view>
							<view class="mt10">回收箱大约剩余： <text class="bold color333">{{ item.capacity_now || 0 }}m³</text> </view>
						</view>
						<view class="acea-row row-middle row-center" @click.stop="clearBox(item.id)">
							<image class="index02" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/index02.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class='loadingicon acea-row row-center-wrapper' v-if="list.length>0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
			
		</view>
		
		<!-- <navigator url="/pages/user/user" open-type="switchTab" class="p30">我的</navigator> -->
		
		<app-update v-if="!privacyStatus" ref="appUpdate" :force="true" :tabbar="false"></app-update>
		
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import appUpdate from "@/components/update/app-update.vue";
	import{
		getIndex,
		clearbox
	} from '@/api/news.js'
	export default {
		components:{
			appUpdate
		},
		data() {
			return {
				sysHeight: sysHeight,
				info:"",
				list:[],
				loadTitle: this.$t(`加载更多`),
				loading: false,
				loadend: false,
				page: 1,
				limit: 10,
				privacyStatus: false, // 隐私政策是否同意过
			};
		},
		created() {
			uni.setStorageSync("privacyStatus", true);
		},
		onShow() {
			this.empty();
			this.getlist();
		},
		methods:{
			empty(){
				this.page = 1;
				this.loading = false;
				this.loadend = false;
				this.list = [];
				this.loadTitle = '';
			},
			getdetails(id){
				uni.navigateTo({
					url: `/pages/users/addBox?id=${id}`
				})
			},
			clearBox(id){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否清空此回收箱？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							clearbox({ id : id }).then(res=>{
								that.$util.Tips({ title : res.msg },()=>{
									that.empty();
									that.getlist();
								})
							}).catch(err=>{
								that.$util.Tips({ title : err })
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getlist(){
				let that = this;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				getIndex({
					page: that.page,
					limit: that.limit,
				}).then(res=>{
					this.info = res.data.info;
					// this.list = res.data.list;
					let list = res.data.list,
						loadend = list.length < that.limit;
					that.list = that.$util.SplitArray(list, that.list);
					that.$set(that, 'list', that.list);
					that.page = that.page + 1;
					that.loading = false;
					that.loadend = loadend;
					that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
				}).catch(err=>{
					this.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			scanCode(){
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: `/pages/newIndex/tibao?id=${res.result}`
						})
					}
				});
			}, 
			urlClick(url){
				uni.navigateTo({
					url: url
				})
			}
		},
		onReachBottom() {
			this.getlist();
		}
	}
</script>

<style lang="scss" scoped>
	.index{
		
		.navbar{
			width: 100%;
			background-color: #ffffff;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9999;
			
			.navbarH{
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				line-height: 100rpx;
				
				.title{
					font-size: 36rpx;
					color: #222222;
					font-weight: bold;
				}
				
				.subtitle{
					font-size: 26rpx;
					color: #333333;
				}
				
				.iconfont{
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}
		}
	
		.main{
			padding: 30rpx;
			
			.timers{
				// position: fixed;
				// top: 0;
				// left: 0;
				// right: 0;
				// padding: 0 30rpx;
				// background-color: #f5f5f5;
			}
			
			.index01{
				width: 154rpx;
				height: 34rpx;
			}
			.index02{
				width: 196rpx;
				height: 60rpx;
				margin-top: 20rpx;
			}
		
			.list{
				
				.item{
					background-color: #ffffff;
					border-radius: 15rpx;
					
					.pictrue{
						width: 120rpx;
						height: 120rpx;
						// background-color: #0AD08C;
						border-radius: 10rpx;
						overflow: hidden;
						// position: relative;
						
					
					}
				}
				
			}
		}

	
	
	}
</style>
